
<template>
  <div class="login_container">

<!--    <div class="login_logo">-->
<!--      <img />-->
<!--    </div>-->
   <div class="login_box">

      <!-- 登录表单区域 -->
      <el-tabs :stretch="true">
        <el-tab-pane label="账号密码登录">
          <!-- 账号密码登录表单 -->
          <el-form ref="pwdLoginFormRef" :model="pwdLoginForm" :rules="pwdLoginFormRules">
            <!-- 用户名 -->
            <el-form-item prop="username"  label="账号">
              <el-input placeholder="用户名/手机号"  v-model="pwdLoginForm.username">
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password" label="密码">
            <el-input placeholder="密码" type="password"
                       v-model="pwdLoginForm.password">
              </el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="login_btns">
              <el-button type="primary" @click="pwdLogin" :loading="loading">登录</el-button>
              <el-button type="primary" @click='toRegister'>注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

<!--手机验证登录-->
        <el-tab-pane label="手机验证登录">
    <el-form ref="phoneLoginFormRef" :model="phoneLoginForm" :rules="phoneLoginFormRules">
        <!-- 手机号 -->
       <el-form-item prop="phone" label="手机号">
              <el-input placeholder="手机号"  v-model="phoneLoginForm.phone">
              </el-input>
            </el-form-item>
        <!-- 手机验证码 -->
        <el-form-item prop="phoneCode" label="验证码">
              <el-input placeholder="验证码" v-model="phoneLoginForm.code">
                <template #append>
                  <el-button  type="primary" @click="checkPhone" >获取验证码</el-button>
                </template>
              </el-input>
            </el-form-item>
        <el-form-item class="login_btns">
              <el-button type="primary" @click="phoneLogin">登录</el-button>
              <el-button type="success" @click='toRegister'>注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

      </el-tabs>
    </div>
    <div class="login_footer">
      登录表示您已阅读并同意
      <a href="#">服务条款</a>
    </div>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  toRefs, onMounted,
  // getCurrentInstance
} from 'vue'
import axios from 'axios'
import {
  useRouter
} from 'vue-router'
import {ElButton, ElForm, ElFormItem, ElInput} from "element-plus";
import phone from "@element-plus/icons/lib/Phone";
//import index from "../index";
export default {

  name: "SignOnView",

   setup() {

    // 验证手机号的规则
    const checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    };


    const router = useRouter()

    const pwdLoginFormRef = ref()
    const phoneLoginFormRef = ref()

    const state = reactive({
      pwdLoginForm: {
        username: '',
        password: ''
      },

      phoneLoginForm: {
        phone: '',
        code: ''
      },
      pwdLoginFormRules: {
        username: [{
          required: true,
          message: '请输入你的账号',
          trigger: 'blur'
        }],
        // 验证密码是否合法
        password: [{
          required: true,
          message: '请输入你的密码',
          trigger: 'blur'
        }],
        emailCode: [{
          required: true,
          message: '请输入你获取到的验证码',
          trigger: 'blur'
        }]
      },
      phoneLoginFormRules: {
        phone: [{
          required: true,
          message: '请输入你的手机号',
          trigger: 'blur'
        },
          {
            validator: checkMobile,
            trigger: 'blur'
          }
        ],
        phoneCode: [{
          required: true,
          message: '请输入你获取到的验证码',
          trigger: 'blur'
        }]
      },
      loading: false,
      // 控制获取验证码
      buttonText: '获取验证码',
      disabled: false,
      duration: 60,
      timer: null
    })

    const pwdLogin = async () => {
      try {
        const response = await axios.post("http://127.0.0.1:8091/accounts/signOn", state.pwdLoginForm);
        if (response.data.status===200) {
          alert("登录成功");
          // 保存登录状态
         // index.setUser(response.data.data);
          // 异步操作捏
          sessionStorage.setItem('user', JSON.stringify(response.data.data));
        //  window.location.reload();
          await router.push({
            path: 'mainPage'
          })
          window.location.reload();


        } else {
          alert("登录失败");
        }
      } catch (error) {
        alert("登录失败");
      }
    };



    //获取验证码的函数；
     const checkPhone = async () => {

       try {
         const test=phoneLoginFormRef.value.phone
         const response = await axios
             // .post("http://127.0.0.1:8091/accounts/sendMsg?phone="+phoneLoginFormRef.value.phone, {
             //   params: {
             //     phone: phoneLoginFormRef.value.phone // 替换为实际的 'phone' 参数值
             //   }
             // })
             .post("http://127.0.0.1:8091/accounts/sendMsg", null, {
               params: {
                // phone: String(phoneLoginFormRef.value.phone)// 将手机号码作为查询参数发送

                    phone: state.phoneLoginForm.phone
               }
             })
         if (response.data.status===200) {
           alert("验证码发送成功");


         }
         else{
           alert("获取验证码失败");
           console.log(String(phoneLoginFormRef.value.phone))
         }

        // phoneLoginFormRef.value.phoneCode = response.data.code;
       }
       catch(error)  {
             console.error('Failed to get verification code:', error);
           }
     };








    const phoneLogin = async () => {
      try {
        const response = await axios.post("http://127.0.0.1:8091/accounts/signOn/msg", state.phoneLoginForm);
        if (response.data.status===200) {
          alert("登录成功");
        //  domain.setUser(response.data.data);
          sessionStorage.setItem('user', JSON.stringify(response.data.data));

          await router.push({
            path: 'mainPage',
          })
          window.location.reload();

         } else {
          alert("登录失败");
        }
      } catch (error) {
        alert("登录失败");
      }
    };


     //路由跳转，回到register；

    const toRegister = () => {
      router.push({
        path: 'register'
      })
    }
    return {
      ...toRefs(state),
      pwdLoginFormRef,
      phoneLoginFormRef,
      pwdLogin,
       phoneLogin,
      checkPhone,
      toRegister
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  top:150px;
  position: relative;
  width: 0px;
  height: 400px;
  left:50%;
  //position: fixed;
  background-size: 30% 30%;
}

.login_box {

  top:200px;
  width: 395px;
  height: 295px;
  background-color: rgba(225, 225, 225, 0);
  border: 1px solid rgba(225, 225, 225, 0);
  box-shadow: 2px 3px 3px #aaaaaa;
  border-radius: 5px;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login_btns {
 // text-align: center;
  position: relative;
  left:29%;
}

.login_footer {
  position: absolute;
  left: 1%;
  top: 30%;
  transform: translate(-50%, -50%);
  border: 1px solid #ffffff;
  width: 325px;
  height: 30px;
  text-align: center;
}
</style>

<style scoped>
.login_box {



  backdrop-filter: blur(15px);
  box-shadow: 0 0 5px #fff;
}

.el-tabs >>> .el-tabs__header {

  padding: 5% 10% 0 10%;
}

.el-tabs >>> .el-tabs__item:hover {

  color: #fff;
  cursor: pointer;
}

.el-tabs >>> .el-tabs__item.is-active {

  color: #c915e5;
}

.el-form {

  text-align: center;
}

.el-form-item>>>.el-form-item__error {

  left: 10%;
}

.el-input {

  width: 80%;
}

.el-input {

  --el-input-font-color: black;
}

.el-input>>>.el-input__inner {

  background-color: rgba(225, 225, 225, 0);
  box-shadow: 0 0 2px #fff;
  border: 1px solid #fff;
}

.el-button {

  border-radius: 10px;
}

.el-button--primary {

  --el-button-font-color: #409e40;
  --el-button-background-color: #ffffff;
  --el-button-border-color: #409eff;
  --el-button-hover-color: #66b1ff;
  --el-button-active-font-color: #e6e6e6;
  --el-button-active-background-color: #0d84ff;
  --el-button-active-border-color: #0d84ff;
}
</style>

